<template>
  <div class="sign" id="sign">
    <div class="logo">
    </div>
    <div class="main">
      <h4 class="title">
        <div class="normal-title">
          <a class href="/loginPage" target="_Parent">登录</a>
          <b>·</b>
          <a id="js-sign-up-btn" class="active" href="#">注册</a>
        </div>
      </h4>

      <div class="js-sign-up-container">
        <form class="new_user" id="new_user" accept-charset="UTF-8">
          <div class="input-prepend restyle">
            <input
              placeholder="昵称(必填)"
              type="text"
              value='lanlaner'
              v-model="username"
              required
              maxlength="10"
              minlength="6"
              @blur="checkName()"
            />
            <i class="iconfont ic-user"></i>
          </div>
          <div class="input-prepend restyle no-radius js-normal">
            <input
              placeholder="手机号(必填)"
              type="tel"
              v-model="phone"
              required
              value="17623010185"
              pattern="^1(3|4|5|7|8)\d{9}$"
            />
            <i class="iconfont ic-phonenumber"></i>
          </div>
          <div class="input-prepend restyle no-radius js-normal">
            <input
              placeholder="邮箱(必填)"
              type="email"
              v-model="email"
              required
              value="1960000138@qq.com"
              pattern="^[a-zA-Z0-9_.-]{5,}@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$"
            />
          </div>
          <div class="input-prepend restyle no-radius js-normal">
            <input placeholder="验证码(必填)" type="text" required v-model="ver_code_input" />
            <i class="iconfont ic-phonenumber" @click="getEmailCode()">
              <input
                type="button"
                style="width:100%;height:100%;margin-right:30px;"
                v-model="send_ver_code"
              >
            </i>
          </div>
          <div class="input-prepend">
            <input
              placeholder="密码(必填)"
              type="password"
              v-model="password"
              required
              maxlength="18"
              minlength="6"
            />
            <i class="iconfont ic-password"></i>
          </div>
          <button value="注册" class="sign-up-button" data-disable-with="注册" @click="register()">注册</button>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      email: "",
      phone: "",
      ver_code: "",
      ver_code_input: "",
      ver_case: false,
      send_ver_code: "获取验证码",
      send_time: 5,
    };
  },
  methods: {
    getEmailCode() {
      var interval = setInterval(() => {
        this.send_time--;
        if (this.send_time == 0) {
          this.send_ver_code = "获取验证码";
          this.send_time = 5;
          clearInterval(interval);
        } else {
          this.send_ver_code = this.send_time + "s后重新获取";
        }
      }, 1000);
      alert("验证码已发送至邮箱！"),
        this.$axios({
          method: "POST",
          url: "api/ver_email/",
          data: {
            email: this.email,
          },
        })
          .then((res) => {
            if (res.data.case) {
              this.ver_case = true;
              this.ver_code = res.data.vercode;
              alert(this.ver_code);
              return false;
            }
          })
          .catch((e) => {
            console.log(e);
          });
    },
    checkName() {
      this.$axios({
        method: "POST",
        url: "api/checkUsername",
        data: {
          username: this.username,
        },
      })
        .then((res) => {
          if (res.data.caseOne) {
            alert("用户名已存在，请重新输入！");
            this.username = "";
            return false;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // login:function(){},
    register() {
      if (
        this.username != "" &&
        this.password != "" &&
        this.phone != "" &&
        this.email != ""
      ) {
        if (this.ver_code_input != this.ver_code) {
          alert("验证码不正确，请重新输入！");
          return false;
        } else {
          this.$axios({
            method: "POST",
            url: "api/register",
            //    post使用的传值方法
            data: {
              username: this.username,
              password: this.password,
              email: this.email,
              phone: this.phone,
            },
            //    get使用的传值方法
            //    params:{}
          })
            .then((data) => {
                alert("注册成功！");
                location.href = data.data.url;
              }
            ).catch(
              //    后台登录失败打印错误
              (e) => {
                alert("注册失败失败");
                console.log(e);
              }
            );
        }
      }
    },
  },
};
</script>